<template>
	<view class="container">
		<uni-nav-bar title="入库首页" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
		<view class="card">
			<view class="title">
				入库管理
			</view>
			<uni-grid :column="3" :show-border="false" :square="false" @change="change1">
				<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<view class="pic">
							<image class="image" :src="item.url" mode="aspectFill" />
						</view>
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<!-- <uni-badge :text="item.badge" :type="item.type" /> -->
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	export default {
		name: "InWarehouse",
		data() {
			return {
				list: [{
						url: '/static/inwarehouse/shrk.png',
						page: '/pages/inwarehouse/shInwarehouse',
						text: '随货入库',
						// badge: '0',
						// type: "primary"
					},
					{
						url: '/static/inwarehouse/fbrk.png',
						page: '/pages/inwarehouse/fbInwarehouse',
						text: '自营非标入库',
						// badge: '1',
						// type: "success"
					},
					{
						url: '/static/inwarehouse/zyrk.png',
						page: '/pages/inwarehouse/zyInwarehouse',
						text: '自营标品入库',
						// badge: '99',
						// type: "warning"
					}
				]
			};
		},
		methods: {
			change1(e) {
				let { index } = e.detail
				const url = this.list[index].page;
				this.$navTo(url)
			}
		},
	}
</script>


<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	page {
		background: #f7f7f7;
	}

	.container {
		padding: 0 15rpx;
		box-sizing: border-box;
	}

	.pic {
		width: 90rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: $uni-main-bgColor;
		border-radius: 20rpx;

		.image {
			width: 65%;
			height: 65%;
		}
	}

	.text {
		font-size: $uni-font-size-small;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}

	.grid-dot {
		position: absolute;
		top: 10rpx;
		right: 30rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 15rpx;
		margin-top: 20rpx;

		.title {
			font-weight: bold;
			font-size: $uni-font-size-big;
			color: $uni-main-bgColor;
			padding: 15rpx 0;
			margin: 0 30rpx;
			border-bottom: 0.5px solid #ccc;
			box-sizing: border-box;
		}
	}
</style>